<template>
  <div class="app-container">
    <el-row style="margin-bottom:15px">
      <el-date-picker
        v-model="time"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        clearable
      />
      <el-button class="filter-item but" type="primary" icon="el-icon-search" @click="getdata()">
        审查数据
      </el-button>
      <el-button class="filter-item but" type="danger" icon="el-icon-search" @click="deletedata()">
        删除
      </el-button>
    </el-row>
    <el-table
      :data="list"
      stripe
      style="width: 100%"
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="身份" width="95">
        <template slot-scope="scope">
          {{
            scope.row.identity === 1
              ? "本科生"
              : scope.row.identity === 2
                ? "外校生"
                : scope.row.identity === 3
                  ? "老师"
                  : "研究生"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="学号">
        <template slot-scope="scope">
          {{ scope.row.stu_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="姓名">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="学院">
        <template slot-scope="scope">
          {{ scope.row.college }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="单位名称">
        <template slot-scope="scope">
          {{ scope.row.field }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="签到时间"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.time | formatDate }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { formatDate, gettime } from '@/api/table'
import { deletedata } from '@/api/nemu'
export default {
  name: 'Dashoard',
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // }
    formatDate(time) {
      time = time.replace(/T/g, ' ')
      time = time.replace(/Z/g, ' ')
      var date = new Date(time)
      if (time !== '') {
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    }
  },
  // import引入的组件需要注入到对象中才能使用
  data() {
    // 这里存放数据
    return {
      list: null,
      field: '',
      restaurants: [],
      All: [],
      time: '',
      timedata: {
        time1: '',
        time2: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  // 计算属性
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {

  },
  // 这里存放数据
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    async deletedata() {
      console.log('this.time: ', this.time)
      if (this.time !== null) {
        this.timedata.time1 = formatDate(this.time[0], 'yyyy-MM-dd hh:mm:ss')
        this.timedata.time2 = formatDate(this.time[1], 'yyyy-MM-dd hh:mm:ss')
        console.log('this.timedata: ', this.timedata)
      }
      if (this.time == null) {
        this.timedata = {
          time1: '',
          time2: '' }
      }
      if (this.timedata.time1 === 'NaN-aN-aN aN:aN:aN' || this.time == null) {
        this.$message.error('请选择时间后再删除')
        return
      }
      this.$confirm('此操作将永久该时间段的数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deletedata(this.timedata)
        this.timedata = {
          time1: '',
          time2: '' }
        this.list = null
        console.log('res: ', res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async getdata() {
      console.log('this.time: ', this.time)
      if (this.time !== null) {
        this.timedata.time1 = formatDate(this.time[0], 'yyyy-MM-dd hh:mm:ss')
        this.timedata.time2 = formatDate(this.time[1], 'yyyy-MM-dd hh:mm:ss')
        console.log('this.timedata: ', this.timedata)
      }
      if (this.time == null) {
        this.timedata = {
          time1: '',
          time2: '' }
      }
      if (this.timedata.time1 === 'NaN-aN-aN aN:aN:aN' || this.time == null) {
        this.$message({
          message: '请选择时间',
          type: 'warning'
        })
        return
      }
      const res = await gettime(this.timedata)
      this.list = res.data
      if (res.data == null) {
        this.$notify({
          title: '提示',
          message: '此时间段没有人员信息'
        })
        return
      }
      console.log('res: ', res)
    }

  }
}
</script>

<style>
</style>
